<template>
	<view class="container">
		<view class="status_bar">

		</view>
		<uni-nav-bar style="border: none;" background-color="rgba(255, 255, 255, 0)" :fixed="true" 
			  @clickLeft="goBack" >
			<template v-slot:left>
				<view class="navLeft">
					<i class="icon-left iconfont" />
					返回
				</view>
			</template>
			<view class="musicTitle">
				{{musicList[index].name}}
			</view>
			</uni-nav-bar>
		<BingLyric :lyrics="lyrics" :areaStyle="{background:'none'}" :curTime="currentTime"
			@centerBtnClick="updateTime" />
		<slider :value="currentTime" :max="bgAudioManager.duration" @change="sliderChange" activeColor="#FFCC33"
			backgroundColor="#000000" block-color="#8A6DE9" block-size="10" />
		<view class="timeLine">
			<view class="time">
				{{formatSeconds(currentTime)}}
			</view>
			
			<view class="time">
				{{formatSeconds(bgAudioManager.duration)}}
			</view>
		</view>
		<view class="control">
			<i :class="`icon-iov-front iconfont iov-front ${fontDisabled}`" @click="handleFront"  />
			<i class="icon-start iconfont start" v-if="bgAudioManager.paused" @click="handleStart"  />
			<i class="icon-stop iconfont start" v-if="!bgAudioManager.paused" @click="handleStop" />
			<i :class="`icon-iov-next iconfont iov-next ${nextDisabled}`" @click="handleNext" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		musicList
	} from '../../store/music';
	import {
		parseLyrics,
		formatSeconds
	} from '@/utills/parseLyrics.js'
	// import iconv from 'iconv-lite';
	import {
		TextDecoder
	} from 'text-encoding';
	import BingLyric from "@/components/bing-lyric/bing-lyric.vue"
	import {
		bgAudioManager,
		currentTime,
		index
	} from '../../store/music';
let fontDisabled=computed(()=>{
	return index.value==0?'disabled':''
})
let nextDisabled=computed(()=>{
	return index.value==(musicList.value.length-1)?'disabled':''
})

	let lyrics = ref()
	const goBack = () => {
		uni.navigateBack()
	}

	const updateTime = (val) => {
		// console.log(85, val.centerTime, bgAudioManager.value.currentTime)
		bgAudioManager.value.seek(val.centerTime)

	}
	const sliderChange = (value) => {
		
		bgAudioManager.value.seek(value.detail.value)
		
	}
	const handleStart=()=>{
		bgAudioManager.value.play()
	}
	const handleStop=()=>{
		bgAudioManager.value.pause()
	}
	const handleFront=()=>{
		if(index.value !=0){
			index.value=index.value - 1
		}
	}
	const handleNext=()=>{
		if(index.value !=musicList.value - 1){
			index.value=index.value + 1
		}
	}
	onLoad(() => {
		// console.log(bgAudioManager.value)
		uni.request({
			url: musicList.value[0].lyrics,
			responseType: 'arraybuffer',
			success: (res) => {
				console.log(199, bgAudioManager.value.duration)
				// let text = iconv.decode(Buffer.from(res.data), 'gb2312');
				let decoder = new TextDecoder('gb2312');
				lyrics.value = decoder.decode(new Uint8Array(res.data)).split('\r\n');


			},
			fail: (err) => {
				console.error('获取歌词失败', err);
			}
		});
	})
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(to bottom, #205158, #112A2E);
		height: 100vh;
	}
	.navLeft{
		display: flex;
		font-size: 30rpx;
	}

	::v-deep .uni-navbar--border {
		border: none !important;
	}

	.timeLine {
		display: flex;
		justify-content: space-between;
		font-size: 25rpx;
		margin-top: -15rpx;

		.time:first-child {
			margin-left: 20rpx;
			/* 左侧留白 */
		}

		.time:last-child {
			margin-right: 20rpx;
			/* 右侧留白 */
		}
	}
	.control{
		display: flex;
		justify-content: center;
		margin-top: 60rpx;
		
		.iov-front{
			font-size: 70rpx !important;
			cursor: pointer;
		}
		.start{
			font-size: 80rpx !important;
			margin-left: 70rpx;
			margin-right: 70rpx;
			cursor: pointer;
		}
		.iov-next{
			font-size: 70rpx !important;
			cursor: pointer;
		}
		.disabled{
			color: #333333;
		}
		
	}
	.musicTitle{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #000;
		font-size: 30rpx;
	}
	
	
</style>